<template>
  <div class="user-center">
    <div class="user-box">
      <div class="user-left">
        <UserLeft></UserLeft>
      </div>
      <div class="user-right">
        <h1>个人信息</h1>
        <div class="user-info-box part-1 clear">
          <h2>{{userInfo.name}}（{{userInfo.email}}）</h2>
          <div class="item">
            <span>注册时间：</span>
            <p>{{dayjs(userInfo.created_at * 1000).format("YYYY-MM-DD HH:mm:ss")}}</p>
          </div>
          <div class="item">
            <span>最后登录：</span>
            <p>{{dayjs(userInfo.last_login_at * 1000).format("YYYY-MM-DD HH:mm:ss")}}</p>
          </div>
          <div class="item">
            <span>注册IP：</span>
            <p>{{userInfo.register_ip}}</p>
          </div>
          <div class="item">
            <span>上次登录：</span>
            <p>{{userInfo.last_login_ip}}</p>
          </div>
          <div class="item">
            <span>手机号码：</span>
            <p><b>{{userInfo.phone}}</b></p>
          </div>
        </div>
        <h1>公司信息</h1>
        <div class="user-info-box part-2">
          <div class="item">
            <span>公司名称：</span>
            <p>{{userCompanyInfo.title}}</p>
          </div>
          <div class="item">
            <span>公司简介：</span>
            <p>{{userCompanyInfo.sub_title}}</p>
          </div>
          <div class="item">
            <span>公司性质：</span>
            <p>{{userCompanyInfo.nature_title}}</p>
          </div>
          <div class="item">
            <span>已有专利数量：</span>
            <p>{{userCompanyInfo.patent_count}}</p>
          </div>
          <div class="item">
            <span>是否已上市：</span>
            <p>{{userCompanyInfo.is_listed | listedFilter}}</p>
          </div>
          <div class="item">
            <span>是否有融资需求：</span>
            <p>{{userCompanyInfo.is_finance | listedFilter}}</p>
          </div>
          <div class="item">
            <span>公司办公地址：</span>
            <p>{{userCompanyInfo.work_address}}</p>
          </div>
          <div class="item">
            <span>归属地：</span>
            <p>{{userCompanyInfo.province}}-{{userCompanyInfo.city}}-{{userCompanyInfo.area}}</p>
          </div>
        </div>
        <h1>团队信息</h1>
        <div class="user-info-box part-3">
          <div class="item">
            <span>团队编号：</span>
            <p>{{userInfo.match_number}}</p>
          </div>
          <div class="item">
            <span>团队队名：</span>
            <p>{{userTeamInfo.title}}</p>
          </div>
          <div class="item team-item">
            <span>信息</span>
            <p><i>姓名</i><i>性别</i><i>工作部门</i><i>职务</i><i>手机号</i><i>邮箱</i></p>
          </div>
          <div class="item team-item" v-for="item in userTeamInfo.items" :key="item.id">
            <span>{{item.type | teamFilter}}：</span>
            <p>
              <i>{{item.name}}</i><i>{{item.sex | sexFilter}}</i><i>{{item.work_branch}}</i><i>{{item.job}}</i><i>{{item.phone}}</i><i>{{item.email}}</i>
            </p>
          </div>
        </div>
        <h1>项目信息</h1>
        <div class="user-info-box part-4">
          <div class="item">
            <span class="big-title">公司已有或正研发的APP项目：</span>
            <p>{{userProjectInfo.app_count}}个</p>
          </div>
          <div class="item">
            <span>赛题方向：</span>
            <p>{{userProjectInfo.direction_title}}</p>
          </div>
          <div class="item">
            <span>项目名称：</span>
            <p>{{userProjectInfo.title}}</p>
          </div>
          <div class="item">
            <span>是否已申请专利：</span>
            <p>{{userProjectInfo.is_patent | listedFilter}}</p>
          </div>
          <div class="item">
            <span>是否参加线上赛：</span>
            <p>{{userProjectInfo.is_online_events | listedFilter}}</p>
          </div>
          <div class="item">
            <span>项目简介：</span>
            <p>
              {{userProjectInfo.content}}
            </p>
          </div>
          <div class="item">
            <span>企业logo：</span>
            <p>{{userProjectInfo.logo_url}}</p>
          </div>
          <div class="item">
            <span>报名表：</span>
            <p>{{userProjectInfo.enroll_form_url}}</p>
          </div>
          <div class="item">
            <span>展示PPT：</span>
            <p>{{userProjectInfo.ppt_url}}</p>
          </div>
          <div class="item">
            <span>项目展示图片：</span>
            <p>{{userProjectInfo.pic_url}}</p>
          </div>
          <div class="item">
            <span>企业视频：</span>
            <p>{{userProjectInfo.video_url}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import UserLeft from "./components/UserLeft";
  import {
    mapGetters,
    mapActions
  } from "vuex";
  export default {
    components: {
      UserLeft,
    },
    data() {
      return {};
    },
    mounted() {
      this.isLogin(),
        this.getUserInfo();
    },
    methods: {
      ...mapActions(["getUserInfo"]),
      isLogin() {
        let token = localStorage.getItem('token');

        if (!token) {
          localStorage.removeItem("token");
          localStorage.removeItem('password_status');
          localStorage.removeItem('password_status_message');

          this.clearLogin().then((res) => {
            this.$router.push({
              name: "index",
            });
          });
        }
      },
    },
    computed: {
      ...mapGetters(["userInfo", "userCompanyInfo", "userTeamInfo", "userProjectInfo"]),
    },
    filters: {
      listedFilter(id) {
        if (id) {
          return '是'
        } else {
          return '否'
        }
      },
      teamFilter(id) {
        if (id == 0) {
          return '负责人'
        } else if (id == 1) {
          return '联系人'
        } else {
          return '成员'
        }
      },
      sexFilter(id) {
        if (id == 0) {
          return '男'
        } else if (id == 1) {
          return '女'
        } else {

        }
      },
    }
  };
</script>

<style scoped>
  .user-info-box h2 {
    width: 100%;
    font-size: 24px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #0b4696;
  }

  .user-info-box span {
    color: #858585;
    margin-right: 10px;
  }

  .user-info-box .item {
    width: 100%;
    display: flex;
  }

  .part-1 .item {
    width: 50%;
    float: left;
    display: flex;
  }

  .user-info-box .item p {
    flex: 1;
  }

  .part-1 .item span {
    width: 90px;
  }

  .part-2 .item span {
    width: 150px;
  }

  .part-3 .item span {
    width: 90px;
  }

  .part-4 .item span {
    width: 150px;
  }

  .part-4 .item .big-title {
    width: 260px;
  }

  .team-item i {
    margin-right: 10px;
    font-style: normal;
    color: #666;
    width: 100px;
    display: inline-block;
    text-align: center;
  }

  .team-item i:nth-of-type(2) {
    width: 40px;
  }

  .team-item i:nth-of-type(3) {
    width: 140px;
  }
</style>
